<template>
	<div>
		<view v-if="formData.orderCode" style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;font-weight: bold;">
			平台订单号：{{formData.orderCode}}
		</view>
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px 15px 25px;display: flex;flex-direction: row;">
			<view style="width: 50px;display: flex;flex-direction: column;">
				<view style="height: 24px;width: 24px;border-radius: 50%;background-color: #464646;color: #ffffff;display: flex;justify-content: center;align-items: center;">发</view>
			    <view style="height: 97px;width: 1px;border-left: 1rpx dashed #bf6006;margin-left: 11px;"></view>
				<view style="height: 24px;width: 24px;border-radius: 50%;background-color: #bf6006;color: #ffffff;display: flex;justify-content: center;align-items: center;">收</view>
			</view>
			<view style="display: flex;flex-direction: column;width: 100%;">
				<view style="display: flex;width: 100%;">
					<!--发货方-->
					<view style="display: flex;flex-direction: column;width: 100%;">
					    <text style="font-size: 16px;font-weight: bold;">发货方信息</text>
					    <span style="display: flex;justify-content: space-between;margin-top: 10px;">
							<text>{{formData.shipName}}</text>
					    </span>
						<span style="display: flex;flex-direction: column;margin-top: 10px;">
							<span>
								<text style="font-size: 16px;font-weight: bold;">{{formData.shipContacts}}</text>
								<text style="margin-left: 10px;">{{formData.shipContactTel}}</text>
							</span>
							<span style="color: #6f6f6f;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
								{{formData.originDistractName}}{{formData.originAddress}}
							</span>
						</span>
				    </view>
				</view>
				<!--分割线-->
				<view style="height: 1px;width: 100%;display: flex;justify-content: center;margin: 10px 0;"></view>
				<view style="display: flex;width: 100%;">
					<!--收货方-->
					<view style="display: flex;flex-direction: column;width: 100%;">
					    <text style="font-size: 16px;font-weight: bold;">收货方信息</text>
					    <span style="display: flex;justify-content: space-between;margin-top: 10px;">
							<text>{{formData.deliveryName}}</text>
					    </span>
						<span style="display: flex;flex-direction: column;margin-top: 10px;">
							<span>
								<text style="font-size: 16px;font-weight: bold;">{{formData.deliveryContacts}}</text>
								<text style="margin-left: 10px;">{{formData.deliveryContactTel}}</text>
							</span>
							<span style="color: #6f6f6f;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
								{{formData.destinationDistractName}}{{formData.destinationAddress}}
							</span>
						</span>
				    </view>
				</view>
			</view>
		</view>
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-list>
				<uni-list-item title="货主订单号" :rightText="formData.ownerOutCode" />
				<uni-list-item title="提货单号" :rightText="formData.pickupOrderNo" />
				<uni-list-item title="计划提货时间" :rightText="formData.pickupTime?parseTime(formData.pickupTime):'--'" />
				<uni-list-item title="计划到达时间" :rightText="formData.arrivalTime?parseTime(formData.arrivalTime):'--'" />
				<uni-list-item title="备注" :rightText="formData.remark" />
			</uni-list>
		</view>
		<view style="height: 20px;"></view>
		<view v-if="goodSourceList.length>0" style="position: relative;display: flex;flex-direction: row;align-items: center;padding: 12px 10px;font-weight: 400;">
			<view style="width: 4px;height: 12px;border-radius: 10px;background-color: #2979ff;margin-right: 6px"></view>
			<view style="display: flex;flex-direction: column;flex: 1;color: #333;">货物信息</view>
		</view>
		<!-- <template v-if="goodSourceList.length>0"><uni-tag style="margin-left: 15px;" :inverted="true" text="货物信息" type="primary" /></template> -->
		<view v-for="(item,index) in goodSourceList" :key="index">
			<uni-card :title="item.goodsName"  :sub-title="item.goodCode" :extra="goodsType_[item.goodsType]">
				<view style="display: flex;justify-content: space-between;">
					<text>{{packingType_[itme.packingType]}}</text>
					<text>{{item.produceCompany}}</text>
				</view>
				<view style="color: #a5a5a5;font-size: 14px;">
					<text>{{item.goodsDesc}}</text>
				</view>
				<text style="background-color: #00cc99;color: #ffffff;padding: 2px 5px;border-radius: 6px;">
					<text>{{ item.num}}件</text>
					<text> {{ item.weight }}吨</text>
					<text>{{ item.bulk}}方</text>
				</text>
			</uni-card>
		</view>
		<view style="height: 50px;"></view>
	</div>
</template>

<script>
	import {
		getOrderDetails
	} from '@/api/system/order.js'
	import {getDicts} from '@/api/system/dict.js'
	import myfilepicker from '@/components/uploadFile/uploadFile.vue'
	
	export default {
		components: {
			myfilepicker
		},
		data() {
			return {
				formData:{}, //详情
				//货物列表
				goodSourceList:[],
				//货物类型
				goodsType_:[],
				//包装类型
				packingType_:[],
				goodOrderId:'',
			}
		},
		onLoad(e) {
			if (e.goodOrderId) {
				uni.showLoading({
					title: '正在加载',
				})
				this.goodOrderId = e.goodOrderId
				//获取订单详情
				getOrderDetails(e.goodOrderId).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.formData = res.data
						this.goodSourceList=this.formData.goodSourceList||[]
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
			
				})
			}
		},
		created() {
			//加载货物类型
			getDicts('goods_type').then(res=>{
				res.data.forEach(item=>{
					this.goodsType_[item.dictValue]=item.dictLabel
				})
			})
			//加载包装类型
			getDicts('packing_type').then(res=>{
				res.data.forEach(item=>{
					this.packingType_[item.dictValue]=item.dictLabel
				})
			})
		},
		computed: {
			parseTime() {
			   return function (time) {
			        let dateee = new Date(time).toJSON();
			        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
			        return date
			    }
			 }
		},
		methods: {
			
		},
	}
</script>

<style scoped>
::v-deep .uni-list-item__extra{
	flex: 1;
}
</style>